import BaseComponent from "../BaseComponent";
import './topBanner.scss'
class TopBanner extends BaseComponent { 
    constructor(options) { 
        super(options)
        const defaultOptions = {
            element: '',
            callback: () => { },
            title: '网易新闻',
            desc: '看遍天下事',
            mode: 'light',
            location: 'top',
            url:''
        }
        this.options = Object.assign(defaultOptions, options)  // Object.assign () 将其内容合并,后面会覆盖前面的
        this.$container = this.options.element // 获取元素
         // 目前不清楚！！！！  ,好像是自定义属性
        this.clstag = window.__isHighVesion__ ? '' : 'jr|keycount|' 
        this.initTop()
    }
    initTop() {
         // 判断位置是置顶 ，还是末尾
        this.$container.classList.add('top-header')
        if (this.options.location == "bottom" ) { 
            this.$container.classList.add('top-header-bottom')
        }
        else if (this.options.location == 'top' ) {
            console.log('top');
                this.$container.classList.add('top-header-top')
        }
        const $logo = this.createDiv('top-header-logo')
        const $box = this.createDiv('top-header-box')
        const $boxtitle = this.createDiv('box-title',this.options.title)
        const $boxdesc = this.createDiv('box-desc',this.options.desc)
         // 判断模式 即背景颜色  黑   或 白  ,默认是白
        if (this.options.mode == 'dark') {
            this.$container.classList.add('top-header-bgc-dark')
       
        }
        else { 
            this.$container.classList.add('top-header-bgc-light')
           
        }
        $box.appendChild($boxtitle)
        $box.appendChild($boxdesc)
        
        // 配置按钮
        const $button = this.createDiv('top-header-button','打开')
        $button.setAttribute('clstag',this.clstag+'IDONTKNOW')
        $button.addEventListener('click', () => { 
            this.options.callback.call(this)
            this.jump(this.options.url)
            console.log('点击了');
        })
        let $fragments = document.createDocumentFragment()  // 最后没有生成div
        $fragments.appendChild($logo)
        $fragments.appendChild($box)
        $fragments.appendChild($button)
        this.$container.appendChild($fragments)
        
    }
}
export default TopBanner